<template>
  <div class="permission-demo">
    <h2>按钮级权限控制演示</h2>
    
    <div class="demo-section">
      <h3>当前用户权限</h3>
      <el-tag 
        v-for="permission in userPermissions" 
        :key="permission"
        style="margin-right: 8px; margin-bottom: 8px;"
        type="success"
      >
        {{ permission }}
      </el-tag>
    </div>

    <div class="demo-section">
      <h3>用户管理模块按钮</h3>
      <div class="button-group">
        <AuthButton type="primary" permission="user:management:add">
          <el-icon><Plus /></el-icon>
          新增用户
        </AuthButton>
        <AuthButton type="success" permission="user:management:export">
          <el-icon><Download /></el-icon>
          导出用户
        </AuthButton>
        <AuthButton type="warning" permission="user:management:import">
          <el-icon><Upload /></el-icon>
          导入用户
        </AuthButton>
        <AuthButton type="danger" permission="user:management:batchDelete">
          <el-icon><Delete /></el-icon>
          批量删除
        </AuthButton>
        <AuthButton permission="user:management:search">
          <el-icon><Search /></el-icon>
          搜索用户
        </AuthButton>
        <AuthButton permission="user:management:reset">
          <el-icon><Refresh /></el-icon>
          重置搜索
        </AuthButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>心理测评模块按钮</h3>
      <div class="button-group">
        <AuthButton type="primary" permission="evaluation:add:add">
          <el-icon><Plus /></el-icon>
          添加评测
        </AuthButton>
        <AuthButton type="success" permission="evaluation:report:search">
          <el-icon><Document /></el-icon>
          查看报告
        </AuthButton>
        <AuthButton type="warning" permission="evaluation:progress:add">
          <el-icon><CirclePlus /></el-icon>
          添加团测
        </AuthButton>
        <AuthButton permission="evaluation:groupReport:view">
          <el-icon><View /></el-icon>
          团体报告
        </AuthButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>预警干预模块按钮</h3>
      <div class="button-group">
        <AuthButton type="primary" permission="intervention:addWarning:add">
          <el-icon><Plus /></el-icon>
          新增预警
        </AuthButton>
        <AuthButton type="success" permission="intervention:assessment:add">
          <el-icon><Edit /></el-icon>
          添加评估
        </AuthButton>
        <AuthButton type="warning" permission="intervention:intervention:add">
          <el-icon><FirstAidKit /></el-icon>
          添加干预
        </AuthButton>
        <AuthButton permission="intervention:setting:add">
          <el-icon><Setting /></el-icon>
          预警设置
        </AuthButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>咨询预约模块按钮</h3>
      <div class="button-group">
        <AuthButton type="primary" permission="consultation:appointment:add">
          <el-icon><Plus /></el-icon>
          添加预约
        </AuthButton>
        <AuthButton type="success" permission="consultation:record:add">
          <el-icon><Edit /></el-icon>
          添加记录
        </AuthButton>
        <AuthButton type="warning" permission="consultation:counselor:add">
          <el-icon><User /></el-icon>
          添加咨询师
        </AuthButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>权限管理模块按钮</h3>
      <div class="button-group">
        <AuthButton type="primary" permission="permission:role:create">
          <el-icon><Plus /></el-icon>
          创建角色
        </AuthButton>
        <AuthButton type="success" permission="permission:role:edit">
          <el-icon><Edit /></el-icon>
          编辑角色
        </AuthButton>
        <AuthButton type="warning" permission="permission:role:authorize">
          <el-icon><Key /></el-icon>
          角色授权
        </AuthButton>
        <AuthButton permission="permission:role:toggle">
          <el-icon><Switch /></el-icon>
          启用/停用
        </AuthButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>个人中心模块按钮</h3>
      <div class="button-group">
        <AuthButton type="primary" permission="person:center:edit">
          <el-icon><Edit /></el-icon>
          编辑信息
        </AuthButton>
        <AuthButton type="success" permission="person:center:changePassword">
          <el-icon><Lock /></el-icon>
          修改密码
        </AuthButton>
        <AuthButton permission="person:center:saveInfo">
          <el-icon><Check /></el-icon>
          保存信息
        </AuthButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>心理课程模块按钮</h3>
      <div class="button-group">
        <AuthButton type="primary" permission="course:list:enter">
          <el-icon><VideoPlay /></el-icon>
          进入课程
        </AuthButton>
        <AuthButton permission="course:list:back">
          <el-icon><ArrowLeft /></el-icon>
          返回列表
        </AuthButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>多权限组合示例</h3>
      <div class="button-group">
        <AuthButton type="primary" :permission="['user:management:add', 'user:management:edit']">
          <el-icon><Plus /></el-icon>
          新增或编辑用户（需要任一权限）
        </AuthButton>
        <AuthButton type="success" :permission="['user:management:export', 'user:management:import']">
          <el-icon><Download /></el-icon>
          导入导出用户（需要任一权限）
        </AuthButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>权限控制说明</h3>
      <el-alert
        title="按钮级权限控制"
        type="info"
        :closable="false"
        description="以上按钮会根据当前用户的权限动态显示或隐藏。只有拥有相应权限的用户才能看到和操作对应的按钮。"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { usePermission } from '@/utils/permission.js'
import AuthButton from '@/components/AuthButton.vue'
import {
  Plus,
  Download,
  Upload,
  Delete,
  Search,
  Refresh,
  Document,
  CirclePlus,
  View,
  Edit,
  FirstAidKit,
  Setting,
  User,
  Key,
  Switch,
  Lock,
  Check,
  VideoPlay,
  ArrowLeft
} from '@element-plus/icons-vue'

const { userPermissions } = usePermission()
</script>

<style scoped>
.permission-demo {
  padding: 20px;
  background-color: #fff;
  min-height: 100%;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.demo-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.el-icon {
  margin-right: 4px;
}
</style>